<template>
  <div class="detail-box">
    <div class="first">
      <img class="title" src="/images/jinghe/right/科创概览@2x.png">
      <div class="firstContent" style="padding-bottom: 18px;">
        <li>统计时间：{{ time }}</li>
        <div class="zlDetail">
          <div class="singleZL">
            <span class="zltext">{{kcData.a}}w</span>
            <span class="zltext" style="left:auto; right:30px;">{{kcData.b}}w</span>
            <img src="/images/jinghe/right/10@2x.png">  
          </div>
          <div class="singleZL"  style="margin-top: -10px;">
            <span class="zltext" style="left:auto; right:30px;">{{kcData.c}} ({{kcData.d.toFixed(2)}}%)</span>
            <img src="/images/jinghe/right/2@2x.png">
          </div>
        </div>
        <img class="legend" src="/images/jinghe/right/注释@2x.png">
        <div class="picts">
          <pie :data="pie1" title="专利个数及占比" pos="leftpie"></pie>
          <pie :data="pie2" title="专利权人数及占比" pos="rightpie"></pie>
        </div>
        <verdict :poptext="jlList" style="margin-top: 5px;" />
      </div>
    </div>
    <div class="first second">
      <img class="title" src="/images/jinghe/right/行业竞合@2x.png">
      <div class="firstContent">
        <li>统计时间：{{ time }}</li>
        <Jinghe1 :popdata="popdata"></Jinghe1>
        <verdict :poptext="jlList2" />
      </div>
    </div>
  </div>
</template>

<script>
import tabList from '../components/tabList'
import verdict from '../components/verdict'
import Jinghe1 from './components/jinghe1.vue'
import pie from './components/pie.vue'

export default {
  data() {
    return {
      kcData: {
        d: 5
      },
      pie1: [],
      pie2: [],
      jlList: '',
      jlList2: '',
      time: "2020.12",
      itemStyle: {
        '--center0': "left",
        '--center': "center",
        '--color': "rgba(193, 226, 255, 1)",
        '--width1': "102px",
        '--width2': "70px",
        '--padding': "0px",
        '--radius': "15px"
      },
      popdata: []
    }
  },
  components: { tabList, verdict, Jinghe1, pie },
  created() {
    this.getList()
    this.getTime()
  },
  methods: {
    async getList() {
      let titles = ['企业', '高校', '科研院所', '其他']
      let x = await this.$api.get('/es/jsc/cyjh_detail_all_new')
      if (x.status == 200) {
        this.hy = x.data['行业']
        this.kcData = {
          a: this.dealNum(x.data['专利']),
          b: this.dealNum(x.data["专利权人"]),
          c: x.data["合作专利个数"],
          d: x.data["合作专利占比"]*100,
        }
        let piedata = [
          x.data["企业(专利数)"],
          x.data["高校(专利数)"],
          x.data["科研院所(专利数)"],
          x.data["其他(专利数)"],
        ]
        let piedata2 = [
          x.data["企业(机构数)"],
          x.data["高校(机构数)"],
          x.data["科研院所(机构数)"],
          x.data["其他(机构数)"],
        ]
        titles.forEach((element,index) => {
          this.pie1.push({
            name: element,
            value: piedata[index]
          })
        })
        titles.forEach((element,index) => {
          this.pie2.push({
            name: element,
            value: piedata2[index]
          })
        })
        // this.gkData = x.data["宁波概况"]
        this.jlList = x.data["侧图1结论"]
        this.jlList2 = x.data["侧图2结论"]
      } else {
        console.log(x)

      }
      await this.hy.forEach(element => {
        this.popdata.push({
          name: Object.keys(element)[0],
          dataList: eval(Object.values(element))
        })
      })
      // this.jlList = r1
      // this.jlList2 = r2
      // this.hangyeData = hy
    },
    async getTime() {
      let { data } = await this.$api.get("/es/jsc/get_time")
      this.time = data["统计时间"].split('.').splice(0, 2).join('.')
    },
    dealNum(m){
      
      return parseFloat((m/10000).toFixed(1))
    }
  }
}
</script>

<style lang="stylus">
.detail-box{
  display: flex;
  height: 100%;
  flex-direction: column;
  font-family: SourceHanSansCN-Regular !important;
  
  .first {
    .title {
    height: 43px;
    margin-bottom: -5px;
  }
    .firstContent{
      // width 389px;
      background-color: rgba(3, 16, 38, 0.7100);
      border-radius: 10px;
      padding: 0 18px;
      margin 0 auto;
      position: relative;
      // padding-bottom: 10px;
      padding-bottom: 28px;
      .zlDetail {
        width: 403px;
        // height: 60px;
        padding-top: 30px;
        .singleZL {
          position relative;
          .zltext {
            position absolute;
            left: 97px;
            top: 15px;
            font-size: 17px;
            font-weight: 500;
            line-height: 24px;
            color: #FFFFFF;
          }
          img{
            position relative;
            left: -10px;
            width: 100%;
            height: 60px;
          }
        }
        
      }
    }
  }
  .second {
    margin-top: 10px;
  }
  li {
    position: absolute;
    top: 0px;
    right: 18px;
    display: inline-block;
    // width: 132px;
    height: 15px;
    font-size: 15px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    line-height: 31px;
    color: #b7b7b7;

    opacity: 1;
  }
}

.legend {
  width: 340px;
  height: 16px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}
.picts{
  display: flex;
  justify-content: space-around;
  height: 193px;
}
</style>
